<template>
  <div class="wrapper">
    <u-navbar :border-bottom="false" title="店铺入驻"></u-navbar>
    <view class="info-view">
      <view>
        <u-steps
          v-if="entrySteps.length != 0"
          :current="current"
          :list="entrySteps"
          direction="column"
          mode="number"
          activeColor="#00E69C"
          unActiveColor="#212121"
          textUnActiveColor="#757575"
          textActiveColor="#009968"
        >
          <!-- :desc="descList" -->
        </u-steps>
        <view v-else>
          <u-empty text="暂无审核日志"></u-empty>
        </view>
        <!-- <u-time-line v-if="entrySteps.length != 0">
          <u-time-line-item v-for="(time, index) in entrySteps" :key="index">
            <template v-slot:content>
              <view class="item-box">
                <view class="u-order-time">{{ time.title }}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line> -->
        <!-- <view v-else>
          <u-empty text="暂无审核日志"></u-empty>
        </view> -->
      </view>
    </view>
    <!-- <div>
      <div class="title">店铺入驻</div>
      <div class="step-list">
        <div
          class="step-item"
          :class="{ active: current == index }"
          v-for="(item, index) in entrySteps"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="submit" @click="keepOn()">开始填写</div>
      <div class="notice" @click="getEntryNotice">查看店铺入驻协议</div>
    </div> -->
    <div class="tips" v-if="!companyData">
      <u-checkbox shape="circle" v-model="checked" :active-color="lightColor">
        <div class="flex">
          我已阅读并同意<navigator
            class="light-color"
            url="/pages/mine/help/tips?type=STORE_REGISTER"
            >《店铺入驻协议》</navigator
          >
        </div>
      </u-checkbox>
    </div>
    <div
      class="long-btn"
      @click="keepOn()"
      v-if="!companyData || companyData.storeDisable == 'APPLY'"
    >
      开始填写
    </div>
    <div
      class="long-btn"
      @click="keepOn()"
      v-if="companyData && companyData.storeDisable == 'APPLYING'"
    >
      查看信息
    </div>
    <div
      class="long-btn"
      @click="keepOn()"
      v-if="companyData && companyData.storeDisable == 'REFUSED'"
    >
      修改信息
    </div>
  </div>
</template>

<script>
import { getCompanyDetail } from "@/api/entry";
export default {
  components: {},

  data() {
    return {
      lightColor: "#009968",
      checked: false,
      current: 999,
      entrySteps: [
        {
          title: "填写资质信息",
          value: "APPLY",
          desc: "请先准备好资料(营业执照、法人身份证、结算银行卡、店铺名称及Logo)再进行提交。",
        },
        {
          title: "提交审核",
          value: "APPLYING",
          desc: "资料提交后，平台将在3个工作日内审核，请耐心等待。",
        },
      ],

      storeStatusWay: [
        {
          title: "申请已通过，请联系管理员",
          value: "OPEN",
          desc: "审核通过后，您将会收到商家平台账号信息即可开店上架商品。",
        },
        {
          title: "店铺已关闭，重申请联系管理员",
          value: "CLOSED",
          desc: "请重新准备材料，并联系管理员。",
        },
        {
          title: "审核未通过,请修改资质信息",
          value: "REFUSED",
          desc: "资料提交后，平台将在3个工作日内审核，请耐心等待。",
        },
      ],

      companyData: "", // 公司信息
    };
  },
  onShow() {
    if (this.$options.filters.tipsToLogin()) {
      this.init();
    }
  },

  mounted() {},

  onLoad(options) {},
  methods: {
    keepOn() {
      // if (this.companyData && this.companyData.storeDisable == "OPEN") {
      //   uni.showToast({
      //     title: "审核已通过",
      //     icon: "none",
      //   });
      // } else {
      if (!this.companyData && !this.checked) {
        uni.showToast({
          title: "请勾选协议",
          icon: "none",
        });
        return;
      } else {
        uni.navigateTo({
          url: "/pages/passport/entry/seller/control",
        });
      }

      // }
    },
    async init() {
      this.entrySteps = [
        {
          title: "填写资质信息",
          value: "APPLY",
          desc: "请先准备好资料(营业执照、法人身份证、结算银行卡、店铺名称及Logo)再进行提交。",
        },
        {
          title: "提交审核",
          value: "APPLYING",
          desc: "资料提交后，平台将在3个工作日内审核，请耐心等待。",
        },
      ];
      const res = await getCompanyDetail();
      if (res.data.success) {
        this.companyData = res.data.result;

        if (this.companyData) {
          this.storeStatusWay.forEach((item) => {
            if (item.value == this.companyData.storeDisable) {
              this.entrySteps.push(item);
            }
          });

          this.current =
            this.entrySteps.findIndex(
              (item) => item.value == this.companyData.storeDisable
            ) || 0;
        } else {
          this.current = 0;
        }
      }
    },
  },
};
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
@import url("./entry.scss");
@import "../../../../uni.scss";
.wrapper {
  padding: 0 64rpx;
}

.title {
  padding-top: calc(104rpx);
  font-style: normal;
  line-height: 1;
  font-weight: 500;
  font-size: 56rpx;
  color: #333;
  padding-left: 20rpx;
}
.step-item {
  padding: 30rpx 20rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #666;
}
.step-list {
  margin: 80rpx 0;
  overflow: hidden;
}
.active {
  color: $light-color;
  background: rgba($color: $light-color, $alpha: 0.1);
  border-radius: 20rpx;
}
.submit {
  color: #fff;
  margin-top: 120rpx;
  background: rgba($light-color, 0.8);
}
.notice {
  margin-top: 40rpx;
  color: #333;
  background: $bg-color;
}
.info-view {
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 32rpx 28rpx;

  .header-title-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #212121;
    font-size: 30rpx;
    font-weight: 500;

    .title {
      width: 160rpx;
    }
  }
  .header-title-view-time {
    color: #757575;
    margin-top: 20rpx;
  }

  .steps-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #909399;
    border-bottom: 1px solid $page-color-base;
    margin-bottom: 10rpx;

    .title {
      width: 160rpx;
    }
  }
  .item-box {
    margin-bottom: 30rpx;
  }
}
.tips {
  position: fixed;
  left: 45rpx;
  bottom: 174rpx;
}
</style>
